<template>
  <div class="msg_block">
    <div class="title">
      <div class="des">消息</div>
      <div class="link">
        <el-link type="primary" @click="$router.push('/msg')">全部消息 ></el-link>
      </div>
    </div>
    <ul class="block">
      <li v-for="(msg, index) in msgs" :key="index" @click="goTaskDetail(msg)">
        <div class="msg_title">
          <span class="read" :class="{unread: msg.msgStatus == 2}"></span>
          {{msg.msg}}
        </div>
        <div class="time">{{msg.createTime}}</div>
      </li>
      <li v-if="!msgs.length">暂无数据</li>
    </ul>
  </div>
</template>
<script>
import httpSer from "@/http";
export default {
  data() {
    return {
      msgs: []
    };
  },
  created() {},
  mounted() {
    this.getMsgs();
  },
  methods: {
    getMsgs() {
      let url = "/msgInfo/pageMsgInfo";
      let data = {
        msgStatus: 2
      };
      httpSer.post(url, data).then(res => {
        let msgs = res.records;
        if (msgs.length > 5) {
          msgs.splice(0, 5);
        }
        this.msgs = msgs;
        this.$store.dispatch("getTotalMsg");
      });
    },
    goTaskDetail(item) {
      let url = "/msgInfo/readMsg";
      let data = {
        id: item.id
      };
      httpSer.post(url, data).then(res => {
        this.$router.push({
          path: "/task/taskDetail",
          query: {
            id: item.bizId
          }
        });
        this.$store.dispatch("getTotalMsg");
      });
    }
  },
  filters: {},
  components: {}
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>